<style>
    * {
      margin: 0;
      padding: 0;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      background-color: black;
    }

    #container {
      width: 100%;
      height: 100%;
      display: flex;
      align-items: flex-start;
      justify-content: center;
      position: relative;
    }

    #fireworks {
      transform: scale(0);
      /* 参数：name、duration、delay */
      animation: fireworks 3s 2s infinite;
    }

    @keyframes fireworks {
      0% {
        transform: scale(0);
      }

      80% {
        transform: scale(1);
      }

      100% {
        opacity: 0;
      }
    }

    #firecracker {
      position: absolute;
      left: 50%;
      bottom: 0%;
      margin-left: -4px;
      animation: firecracker 3s infinite;
    }

    @keyframes firecracker {
      0% {
        transform: scale(1);
        bottom: 0%;
      }

      100% {
        bottom: 60%;
        transform: scale(0);
      }
    }
  </style>
